<template>
  <div class="baseinfo" v-title data-title="设立公司立项界面">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-model-item label="项目编号" prop="projectNo" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
            {{form.projectNo}}
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            label="项目分类"
            prop="projectTypeSubCategory"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.projectTypeSubCategory"
              placeholder="请选择项目分类"
              :options="projectCategoryOptions" :disabled="form.id!=''"  
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item
            ref="mainDeptName"
            label="经办经营体"
            prop="mainDeptName"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.mainDeptName" readOnly
              placeholder="请填写正确的组织架构名称，系统自动校验"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
         <a-col :span="16">
          <a-form-model-item
            ref="projectName"
            label="项目名称"
            prop="projectName"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 19 }"
          >
          <!-- placeholder="【**区域】**公司设立”或“**公司信息变更/注销"  --> 
            <a-input
              v-model="form.projectName"
              @blur="
                () => {
                  $refs.projectName.onFieldBlur()
                }
              "
    
              placeholder="【**区域】**公司设立”或“**公司信息变更/注销" 
              :disabled="form.status>1" 
            />
          </a-form-model-item>
        </a-col>
        <!--       label="新建/变更/注销" -->
        <a-col :span="8">
          <a-form-model-item
            label="新建/变更/注销"
            prop="newOrChange"
            ref="newOrChange"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
          <!-- initData -->
          <!--  placeholder="请选择新建/变更/注销" -->
          <!--  <a-select-option value="注销法人公司">注销法人公司</a-select-option> -->
            <a-select v-model="form.newOrChange" placeholder="请选择新建/变更/注销" @change="newOrCeChange" :disabled="kpi.data.length>0">
              <a-select-option value="新建法人公司">新建法人公司</a-select-option>
              <a-select-option value="变更法人公司信息">变更法人公司信息</a-select-option>
              <a-select-option value="注销法人公司">注销法人公司</a-select-option>
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item
            ref="applyReason"
            label="申请事由"
            prop="applyReason"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.applyReason"
              @blur="
                () => {
                  $refs.applyReason.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 1, maxRows: 5 }"
              :placeholder="form.newOrChange == '注销法人公司' ? '说明注销原因' : '基于“现有业务产业化布局/上下游供应链业务外拓/规避业务风险/税筹红利/其他”等原因，并进行详细说明'"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="13" v-if="!cancelShow">
          <a-form-model-item
            ref="companyType"
            label="公司类型"
            prop="companyType"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-select
              v-model="form.companyType"
              placeholder="请选择公司类型"
              :options="companyTypeOptions"
              @change="companyTypeChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col>
         <a-col :span="11" v-if="hasChangeShow">
          <a-form-model-item
            label="公司性质"
            prop="companyNature"
            ref="companyNature"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-select
              v-model="form.companyNature"
              placeholder="请选择公司性质"
              :options="companyNatureOptions"
              @change="companyNatureChange"
            >
              <a-icon slot="suffixIcon" type="plus" />
            </a-select>
          </a-form-model-item>
        </a-col> 
        <a-col :span="11" v-if="!hasChangeShow && selectChangeFirstFlag && !cancelShow"> 
          <a-form-model-item
            label="公司名称"
            prop="companyName"
            ref="companyName"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input v-model="form.companyName" placeholder="点击选择公司名称" @click="supplier.visible = true" readOnly/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="cancelShow">
        <a-col :span="12"> 
          <a-form-model-item
            label="公司名称"
            prop="companyName"
            ref="companyName"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input v-model="form.companyName" placeholder="点击选择公司名称,可多选" @click="cancelSupplier.visible = true" readOnly/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12"> 
          <a-form-model-item
            ref="cancelTime"
            label="注销时间"
            prop="cancelTime"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-date-picker  v-model="form.cancelTime"  placeholder="请输入注销时间"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24"  v-if="cancelShow">
        <a-col :span="24">
          <a-form-model-item
            ref="cancelRisk"
            class="slot-label"
            prop="cancelRisk"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <span slot="label">注销风险及<p>管控措施:</p></span>
            <a-textarea
              v-model="form.cancelRisk"
              @blur="
                () => {
                  $refs.cancelRisk.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              placeholder="可附件说明"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="hasChangeShow && selectChangeFirstFlag">
        <a-col :span="24">
          <a-form-model-item
            ref="companyName"
            label="公司名称"
            prop="companyName"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.companyName"
              @blur="
                () => {
                  $refs.companyName.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 1, maxRows: 5 }"
              style="width: 100%"
              :maxLength="120"
              placeholder="请输入公司名称"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <div v-if="hasChangeShow">
        <a-row :gutter="24">
          <a-col :span="13">
            <a-form-model-item
              label="字号商标"
              prop="brandTrademark"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-input v-model="form.brandTrademark"  placeholder="点击选择字号商标" @click="associated.visible = true" />
            </a-form-model-item>
          </a-col>
        </a-row>
               
      <a-row :gutter="24">
        <a-col :span="13">
          <a-form-model-item
            ref="registeredCapital"
            label="注册资本"
            prop="registeredCapital"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 15 }"
          >
            <a-input
              v-model="form.registeredCapital"
              @blur="
                () => {
                  $refs.registeredCapital.onFieldBlur()
                }
              "
              placeholder="请输入注册资本"
              type="number"
            >
            <span slot="addonAfter">元<a-divider type="vertical" style="height: 30px;"/></span>
            <a-select slot="addonAfter" style="width: 100px" v-model="form.unit"
              placeholder="请选择"
              :options="unitOptions"
              @change="unitChange">
            </a-select>
            </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item
            ref="residence"
            label="住所"
            prop="residence"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.residence"
              @blur="
                () => {
                  $refs.residence.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              placeholder="进驻园区：以园区地址为准
其他：结合最优政策配套、最有利经营成本降低、最有利吸引人才、风险分散原则、集团/股份其他项目合并资源打包争取政策等原则选择注册地点。"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item
            ref="businessScope"
            label="经营范围"
            prop="businessScope"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 20 }"
          >
            <a-textarea
              v-model="form.businessScope"
              @blur="
                () => {
                  $refs.businessScope.onFieldBlur()
                }
              "
              :auto-size="{ minRows: 3, maxRows: 5 }"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      </div>
      <a-row v-if="mainPersonShow" style="margin-bottom:10px;">
        <h3><b>主要人员信息</b></h3>
        <div style="display: flex; margin-top: 10px; margin-bottom: 10px" v-show="btnShow">
          <a-button type="primary" @click="kpiAddMain()">新增</a-button>
          <a-button style="margin-right: 15px" class="default" @click="kpiDelMain()">删除</a-button>
        </div>
        <a-table :row-selection="rowSelectionMain" :columns="kpiMain.columns" :data-source="kpiMain.data" bordered :key="kpiMain.freshKey" :pagination="false">       
          <template slot="jobPosition" slot-scope="text,record,index">
            <a-select v-model="record.jobPosition"  placeholder="请选择"
              :options="jobPositionOptions" @change="((value,option)=>{jobPositionChange(value,option,index,'jobPositionName')})" />
          </template>
          <template slot="fullName" slot-scope="text, record">
            <a-input v-model="record.fullName"  :maxLength="100"/>
          </template>
        </a-table>
      </a-row>
      
      <a-row v-if="form.newOrChange != undefined && form.newOrChange != '' && form.newOrChange != '注销法人公司'">
        <h3><b>{{ headTitle }}</b></h3>
      <div style="display: flex; margin-top: 10px; margin-bottom: 10px" v-show="btnShow">
        <a-button type="primary" @click="kpiAdd()">新增</a-button>
        <a-button style="margin-right: 15px" class="default" @click="kpiDel()">删除</a-button>
      </div>
      <a-table :row-selection="rowSelection" :columns="kpi.columns" :data-source="kpi.data" bordered :key="kpi.freshKey" :pagination="false">       
        <template slot="shareholder" slot-scope="text, record, index">
          <a-textarea v-model="record.shareholder" :auto-size="{ minRows: 1, maxRows: 4 }" style="width: 100%" placeholder="120个字以内" 
            @change="checkValueLen(record.shareholder, 120, index, 'shareholder')" ></a-textarea>
        </template>

        <template slot="ownershipRatio" slot-scope="text, record">
          <a-input-number v-model="record.ownershipRatio" :min="0" :max="100" :precision="2"/>
        </template>

        <template slot="changeOption" slot-scope="text,record,index">
          <a-select v-model="record.changeOption"  placeholder="请选择"
              :options="changeOptionOptions" @change="((value,option)=>{changeOptionChange(value,option,index,'changeOptionName')})" />
        </template>

        <template slot="oldContent" slot-scope="text, record, index">
          <a-textarea v-model="record.shareholder" :auto-size="{ minRows: 1, maxRows: 26 }" style="width: 100%" placeholder="1000个字以内" 
            @change="checkValueLen(record.shareholder, 1000, index, 'shareholder')" ></a-textarea>
        </template>

        <template slot="newContent" slot-scope="text, record, index">
          <a-textarea v-model="record.newContent" :auto-size="{ minRows: 1, maxRows: 26 }" style="width: 100%" placeholder="1000个字以内" 
              @change="checkValueLen(record.newContent, 1000, index, 'newContent')" ></a-textarea>
        </template>
      </a-table>
      </a-row>
      <!-- md不需要五比五拼 2022.08.25 modify by dr -->
      <!-- <five-to-five ref="fiveForm" :projectBuildId="projectBuildId" :change-id="changeId" @addField="addFiveDataToForm"/> -->
    </a-form-model>

      <pagination-select
        :title="associated.title"
        :searchPlaceholder="associated.searchPlaceholder"
        :visible="associated.visible"
        :url="associated.url"
        :columns="associated.columns"
        @hatchHandleOk="associatedHandleOk"
      />

      <pagination-select
        :title="supplier.title"
        :searchPlaceholder="supplier.searchPlaceholder"
        :visible="supplier.visible"
        :url="supplier.url"
        :columns="supplier.columns"
        @hatchHandleOk="supplierHandleOk"
      />
      <pagination-select
        :title="cancelSupplier.title"
        :searchPlaceholder="cancelSupplier.searchPlaceholder"
        :visible="cancelSupplier.visible"
        :url="cancelSupplier.url"
        :columns="cancelSupplier.columns"
        type="checkbox"
        @hatchHandleOk="cancelSupplierHandleOk"
      />
  </div>
</template>
<script>
import $ from 'jquery'
import { getAction, getActionAsync, postAction, postActionAsync } from '@/api/manage'
import { DateTimeFormat, strNotNull } from '@/utils/common.js'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import Vue from 'vue'
import { simpleDebounce } from '@/utils/util'
export default {
  components: {
    PaginationSelect: () => import('@/components/tools/PaginationSelect'),
    FiveToFive: () => import('@/components/tools/projectBuildStup/baseInfo/FiveToFive')
  },
  props: {
    projectBuildId: {
      Type: String,
      default: '',
    },
    selProjectType: {
      Type: String,
      default: ''
    },
    changeId: {
      Type: String,
      default: '',
    }
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      other: '',
      form: {
        id: '',
        projectClass: '64',
        projectNo: '',
        projectName: '',
        mainDeptName: '',
        projectType: '',
        projectTypeSubCategory: '',
        createUserName: '',
        createDate: '',
        applyReason: '',
        companyName: '',
        registeredCapital: null,
        residence: '',
        businessScope: '',
        shareholder: '',
        ownershipRatio: '',
        status: 0 ,
        newOrChange: undefined,
        companyNature:'',
        companyType: undefined,
        unit:'',
        companyNatureName:'',
        companyTypeName: '',
        unitName:'',
        brandTrademark:'',
        shareholderList:[],
        mainPersonList:[],
        cancelTime:'',
        cancelRisk:''
      },
      hasChangeShow: false,
      selectChangeFirstFlag: false,
      headTitle: '',
      projectCategoryOptions: [],
      rules: {
        projectName: [
          { required: true, message: '请输入有效的项目名:格式【**区域】**公司设立”或“**公司信息变更/注销', trigger: 'blur' },
          { min: 1, max: 50, message: '项目名不超过50个字符', trigger: 'blur' },
        ],
        applyReason: [
          { required: true, message: '请输入申请事由', trigger: 'blur' },
          { min: 1, max: 200, message: '申请事由不超过200个字符', trigger: 'blur' },
        ],
        mainDeptName: [
          { required: true, message: '请输入经办经营体', trigger: 'blur' },
          { min: 1, max: 50, message: '经办经营体名称不超过50个字符', trigger: 'blur' },
        ],
        projectTypeSubCategory: [{ required: true, message: '请选择项目分类', trigger: 'change' }],
        companyName: [{ required: true, message: '请选择公司名称', trigger: 'blur' }],
        registeredCapital: [{ required: true, message: '请输入注册资本', trigger: 'blur' }],
        residence: [
          { required: true, message: '请输入住所', trigger: 'blur' },
          { min: 1, max: 100, message: '住所不超过100个字符', trigger: 'blur' },
        ],
        businessScope: [
          { required: true, message: '请输入经营范围', trigger: 'blur' },
          { min: 1, max: 1000, message: '经营范围不超过1000个字符', trigger: 'blur' },
        ],
        newOrChange: [{ required: true, message: '请选择新建/变更', trigger: 'change' }],
        companyType: [{ required: true, message: '请选择公司类型', trigger: 'change' }],
        companyNature: [{ required: true, message: '请选择公司性质', trigger: 'change' }],
        unit: [{ required: true, message: '请选择注册资本单位', trigger: 'change' }],
        cancelTime: [
          { required: true, message: '请填写上市规划', trigger: 'change' }
        ],
        cancelRisk: [
          { required: true, message: '请输入注销风险及管控措施', trigger: 'blur' },
          { min: 1, max: 1500, message: '注销风险及管控措施不超过1500个字符', trigger: 'blur' },
        ],
      },
      url: {
        codeInfoList: '/manage/codeInfo/list',
        getProjectByNo: '/projectBuild/getProjectByNo',
        save: '/projectBuild/add',
        queryVOById: '/projectBuild/queryVOById',
      },
      kpi:{
          columns:[
          {
            title: '股东',
            dataIndex: 'shareholder',
            width: '40%',
            scopedSlots: { customRender: 'shareholder' },
          },
          {
            title: '股权占比',
            dataIndex: 'ownershipRatio',
            width: '50%',
            scopedSlots: { customRender: 'ownershipRatio' },
          }
        ],
        data:[],
        selRowIds:[],
        freshKey:0
      },
      kpiMain:{
          columns:[
          {
            title: '职位',
            dataIndex: 'jobPosition',
            width: '40%',
            scopedSlots: { customRender: 'jobPosition' },
          },
          {
            title: '姓名',
            dataIndex: 'fullName',
            width: '50%',
            scopedSlots: { customRender: 'fullName' },
          }
        ],
        data:[],
        selRowIds:[],
        freshKey:0
      },
      gudongColumns:[
          {
            title: '股东',
            dataIndex: 'shareholder',
            width: '40%',
            scopedSlots: { customRender: 'shareholder' },
          },
          {
            title: '股权占比%',
            dataIndex: 'ownershipRatio',
            width: '50%',
            scopedSlots: { customRender: 'ownershipRatio' },
          }
      ],
      changeColumns:[
          {
            title: '变更事项',
            dataIndex: 'changeOption',
            width: '30%',
            scopedSlots: { customRender: 'changeOption' },
          },
          {
            title: '原登记内容',
            dataIndex: 'shareholder',
            width: '30%',
            scopedSlots: { customRender: 'oldContent' },
          },
          {
            title: '现登记内容',
            dataIndex: 'newContent',
            width: '40%',
            scopedSlots: { customRender: 'newContent' },
          }
      ],
      associated: {
        visible: false,
        title: '请选择字号商标',
        searchPlaceholder: '商标库申请号/注册号',
        url: '/knowledge/brand/listWeb',
        columns: [
          {
            title: '申请号/注册号',
            dataIndex: 'applicationNo',
            align: 'center',
          },
          {
            title: '商标名称',
            dataIndex: 'brandName',
            align: 'center',
          },
          {
            title: '国际分类',
            dataIndex: 'internationalClass',
            align: 'center',
          }
        ]
      },
      supplier: {
        visible: false,
        title: '请选择公司名称',
        searchPlaceholder: '输入公司编号或名称查询',
        url: '/rad/orgCompany/queryCompanyByHte',
        columns: [
          {
            title: '公司编号',
            dataIndex: 'code',
            align: 'center',
          },
          {
            title: '公司名称',
            dataIndex: 'name',
            align: 'center',
          },
          {
            title: '公司法人',
            dataIndex: 'corp',
            align: 'center',
          }
        ],
      },
      cancelSupplier: {
        visible: false,
        title: '请选择公司名称,可多选',
        searchPlaceholder: '输入公司编号或名称查询',
        url: '/rad/orgCompany/queryCompanyByHte',
        columns: [
          {
            title: '公司编号',
            dataIndex: 'code',
            align: 'center',
          },
          {
            title: '公司名称',
            dataIndex: 'name',
            align: 'center',
          },
          {
            title: '公司法人',
            dataIndex: 'corp',
            align: 'center',
          }
        ],
      },
      companyTypeOptions:[],
      companyNatureOptions:[],
      unitOptions:[],
      subName:'',
      loadFinish: false,
      mainPersonShow: false,
      cancelShow: false,
      jobPositionOptions:[],
      changeOptionOptions:[],
      btnShow: false,
      canDoSave: this.$route.query.canDoSave ? (this.$route.query.canDoSave=='true' ? true : false) : true,
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.kpi.selRowIds=selectedRowKeys;
        }
      }
    },
    rowSelectionMain() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.kpiMain.selRowIds=selectedRowKeys;
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.jobPositionName == '法定代表人' || record.jobPositionName == '董事长' || record.jobPositionName == '监事'
          },
        }),
      }
    }
  },
  methods: {
    
    addFiveDataToForm(val,valRef) {
      this.$set(this.form, valRef, val)
    },
    // 实时校验长度
    checkValueLen: simpleDebounce(function(val, len, index, key) {
      if(!val) return
      const leng = val.length
      const obj = this.kpi.data[index]
      if (leng > len) {
        obj[key] = val.slice(0, len)
        this.$set(this.kpi.data, index, obj)
        this.$message.warning(`输入内容超出${len}长度，将自动进行截取`)
      }
    }, 500),
    async doSubmit() {
      if(!this.loadFinish){
        layer.message.warning('请等待页面加载完毕')
        return {}  
      }
      var validR=false;
      try{
        validR = await this.$refs.ruleForm.validate();
       // validR = await this.$refs.fiveForm.checkFiveWriteStatus()
      }catch(e){
        validR = false;
      }
      console.log('validR',validR);
      this.form.validResult = validR;
      let res=await this.doSave()
        this.projectBuildId=res;
      return {valid:validR,id:res};
    },
    async doSave() {
      let flag=null;
      var vm = this
      
      this.form.shareholderList=this.kpi.data;
      if (this.form.newOrChange == '新建法人公司') {
        this.form.mainPersonList=this.kpiMain.data;
      }
      
      if (this.form.newOrChange == '新建法人公司' && (this.kpi.data.length == 0 || this.kpiMain.data.length == 0 )) {
         this.$message.warning('主要人员信息项和股东信息项必填，请添加')
        return
      }

      if (this.kpi.data.length == 0 && this.form.newOrChange == '变更法人公司信息') {
        this.$message.warning('变更事项必填，请添加')
        return
      }
      
      this.form.changeId=this.changeId

      await postActionAsync(this.url.save, this.form)
        .then((res) => {
          if (res.code == 200) {
            vm.form.id = res.result.id;
            vm.form.projectNo = res.result.projectNo;
            this.$message.success('保存成功')
            return flag=res.result.id;
          } else {
            this.$message.warning('保存数据出错:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('保存数据出错:' + res.message)
        })
        return flag;
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    associatedHandleOk(record) {
      if (record != null && record.length > 0) {
        this.form.brandTrademark = record[0].applicationNo +'，'+ record[0].brandName +'，'+ record[0].internationalClass
      }
      this.associated.visible = false
    },
    supplierHandleOk(record) {
      if (record != null && record.length > 0) {
        this.form.companyName = record[0].name
      }
      this.supplier.visible = false
    },
    cancelSupplierHandleOk(record) {
      console.log(record)
      if (record != null && record.length > 0) {
        
        let arr = record.map(item => {return item.name})
        console.log(arr)
        this.form.companyName = arr.join(',')
      }
      this.cancelSupplier.visible = false
    },
    kpiAdd() {
      this.kpi.data.push({
        key: this.kpi.data.length + 1+new Date().getTime(),
        id:'',
        shareholder: '',
        ownershipRatio: '',
        newContent: '',
        changeOption: undefined,
        changeOptionName: ''
      })
    },
    kpiDel() {
      if(this.kpi.selRowIds.length==0){
        this.$message.warning('请选择要删除的记录');
        return;
      }
      for(var i=0;i<this.kpi.selRowIds.length;i++){
        for(var j=this.kpi.data.length-1;j>=0;j--){
          if(this.kpi.data[j].key==this.kpi.selRowIds[i]){
            this.kpi.data.splice(j,1);
            break;
          }
        }
      }
      this.kpi.selRowIds=[];
      this.kpi.freshKey++;
    },
    kpiAddMain() {
      this.kpiMain.data.push({
        key: this.kpiMain.data.length + 1+new Date().getTime(),
        id:'',
        jobPosition: undefined,
        jobPositionName: '',
        fullName: '',
      })
    },
    kpiDelMain() {
      if(this.kpiMain.selRowIds.length==0){
        this.$message.warning('请选择要删除的记录');
        return;
      }
      for(var i=0;i<this.kpiMain.selRowIds.length;i++){
        for(var j=this.kpiMain.data.length-1;j>=0;j--){
          if(this.kpiMain.data[j].key==this.kpiMain.selRowIds[i]){
            this.kpiMain.data.splice(j,1);
            break;
          }
        }
      }
      this.kpiMain.selRowIds=[];
      this.kpiMain.freshKey++;
    },
    companyTypeChange (value,option) {
      this.form.companyTypeName = option.componentOptions.children[0].text;
    },
    companyNatureChange (value,option) {
      this.form.companyNatureName = option.componentOptions.children[0].text;
    },
    unitChange (value,option) {
      this.form.unitName = option.componentOptions.children[0].text;
    },
    jobPositionChange(value,option,index,keyName) {
      const obj = this.kpiMain.data[index]
      obj[keyName] = option.componentOptions.children[0].text;
      this.$set(this.kpiMain.data, index, obj)
    },
    changeOptionChange(value,option,index,keyName) {
      const obj = this.kpi.data[index]
      obj[keyName] = option.componentOptions.children[0].text;
      this.$set(this.kpi.data, index, obj)
    },
    //初始化项目子类
    initProjectCategoryOptions() {
      var vm = this
      getAction(this.url.codeInfoList, { type: '项目子类', isdel: 0, parentid: vm.form.projectClass,pageSize:-1 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.projectCategoryOptions.push({ value: item.code, label: item.name })
              })

              if (vm.projectCategoryOptions.length === 1) {
                vm.form.projectTypeSubCategory = vm.projectCategoryOptions[0].value
              }
            }
          } else {
            this.$message.warning('查询项目子类失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询项目子类失败:' + res.message)
        })
    },
    newOrCeChange (value,option) {
      this.selectChangeFirstFlag = true
      if (value=='新建法人公司') {
        this.hasChangeShow = true
        this.headTitle = '股东信息'
        this.kpi.columns = this.gudongColumns
        this.mainPersonShow = true
        this.cancelShow = false
      } else if(value=='变更法人公司信息') {
        this.hasChangeShow = false
        this.mainPersonShow = false
        this.cancelShow = false
        this.headTitle = '变更事项'
        this.kpi.columns = this.changeColumns
      } else {
        this.cancelShow = true
        this.hasChangeShow = false
        this.mainPersonShow = false
      }
      this.form.companyType= undefined
      this.form.companyTypeName=''
      this.form.companyNature=''
      this.form.companyNatureName=''
      this.form.brandTrademark=''
      this.form.registeredCapital=''
      this.form.residence=''
      this.form.businessScope=''
      this.form.companyName=''
      this.kpi.data = []
      this.kpiMain.data = []
      if (this.form.unit) {
        this.$set(this.form,'unit',this.form.unit)
        this.$set(this.form,'unitName',this.form.unitName)
      }            
      if (this.projectBuildId == null || this.projectBuildId == '') {
        this.initListData()
      }
    },
    //如果有id，则加载已填写信息
    initData() {
      if (this.projectBuildId != null && this.projectBuildId != '') {
        var vm = this
        getAction(this.url.queryVOById, { id: this.projectBuildId,changeId: this.changeId})
          .then((res) => {
            if (res.code == 200) {
              var result = res.result
              if (result != null) {
                this.form = result
                
                if(result.shareholderList!=null){
                  this.kpi.data = result.shareholderList; 
                  this.kpi.data.forEach(item=>{
                    item.key=item.id;
                  });
                }

                if(result.mainPersonList!=null){
                  this.kpiMain.data = result.mainPersonList; 
                  this.kpiMain.data.forEach(item=>{
                    item.key=item.id;
                  });
                }
                this.selectChangeFirstFlag = true
                if (result.newOrChange=='新建法人公司') {
                  this.hasChangeShow = true
                  this.headTitle = '股东信息'
                  this.kpi.columns = this.gudongColumns
                  this.mainPersonShow = true
                } else if (result.newOrChange=='变更法人公司信息') {
                  this.hasChangeShow = false
                  this.mainPersonShow = false
                  this.headTitle = '变更事项'
                  this.kpi.columns = this.changeColumns
                } else {
                  this.hasChangeShow = false
                  this.mainPersonShow = false
                  this.cancelShow = true
                }
                this.loadFinish=true
              } else {
                vm.$message.warning('初始化项目信息为空')
              }
            } else {
              this.$message.warning('初始化项目信息失败:' + res.message)
            }
          })
          .catch((res) => {
            this.$message.warning('初始化项目信息失败:' + res.message)
          })
      }else{
        this.loadFinish=true
      }
    },
    initSubName () {
      var vm = this
      getAction(this.url.codeInfoList, { type: '项目子类', isdel: 0,parentid:vm.form.projectClass,code:vm.form.projectType})
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              this.subName = list.records[0].name
            }
          } else {
            this.$message.warning('项目子类:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('项目子类:' + res.message)
        })
    },
    initSelectOptions() {
      var vm = this
      getAction(this.url.codeInfoList, { type: '公司库公司类型', pageNo:1,pageSize:9999,isdel: 0 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.companyTypeOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询公司库公司类型失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询公司库公司类型失败:' + res.message)
        })

        getAction(this.url.codeInfoList, { type: '公司库性质', pageNo:1,pageSize:9999,isdel: 0 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.companyNatureOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询公司库性质失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询公司库性质失败:' + res.message)
        })

        getAction(this.url.codeInfoList, { type: '公司库注册资金单位', pageNo:1,pageSize:9999,isdel: 0 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.unitOptions.push({ value: item.code, label: item.name })
                if (!vm.form.unit && item.name == '万人民币') {
                  vm.form.unit = item.code
                  vm.form.unitName = item.name
                  vm.$set(vm.form,'unit',item.code)
                  vm.$set(vm.form,'unitName',item.name)
                }
              })
            }
          } else {
            this.$message.warning('查询公司库注册资金单位失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询公司库注册资金单位失败:' + res.message)
        })

        getAction(this.url.codeInfoList, { type: '公司库主要人员', pageNo:1,pageSize:9999,isdel: 0,column: "code", order: "desc", })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.sort((a, b) => {
                return b.code-a.code;
              })
              list.records.map((item) => {
                vm.jobPositionOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询设公司库主要人员职位失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询公司库主要人员职位失败:' + res.message)
        })

        getAction(this.url.codeInfoList, { type: '设立公司变更事项', pageNo:1,pageSize:9999,isdel: 0 })
        .then((res) => {
          if (res.code == 200) {
            var list = res.result
            if (list != null) {
              list.records.map((item) => {
                vm.changeOptionOptions.push({ value: item.code, label: item.name })
              })
            }
          } else {
            this.$message.warning('查询设立公司变更事项失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询设立公司变更事项失败:' + res.message)
        })
    },
    initListData() {
      const _this = this
      this.jobPositionOptions.forEach(item => {
        if (item.label == '法定代表人' || item.label == '董事长'|| item.label == '监事') {
          _this.kpiMain.data.push({
            key: _this.kpiMain.data.length + 1+new Date().getTime(),
            id:'',
            jobPosition: item.value,
            jobPositionName: item.label,
            fullName: '',
          })
        }
      })
    }
  },
  mounted() {
      if (this.projectBuildId == null || this.projectBuildId == '') {
          //this.form.projectType = this.selProjectType;
          //this.form.projectTypeSubCategory = this.selProjectType;
          this.form.createUserName = Vue.ls.get(USER_INFO).realname
          this.form.createDate = DateTimeFormat(new Date())
          this.form.mainDeptName = Vue.ls.get(USER_INFO).deptName
          //this.initSubName()
      }
      this.btnShow=this.canDoSave;
      this.initProjectCategoryOptions()
      this.initData()
      this.initSelectOptions()
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-btn-primary {
  width: 85px;
  height: 30px;
  border-radius: 2px;
  background: #4095e4;
  margin-right: 10px;
}
/deep/ .default {
  width: 85px;
  height: 30px;
  border-radius: 2px;
}
.baseinfo {
  background-color: #fff;
  border: 1px solid #eaeaea;
  padding: 30px;
  .btn {
    display: flex;
    justify-content: center;
  }
}
</style>